<!-- Basic Dropdowns start -->
<section id="basic-dropdowns">
	<div class="row match-height">
		<div class="col-lg-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Basic Dropdown</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<button class="dropdown-item" type="button">Action</button>
								<button class="dropdown-item" type="button">Another action</button>
								<button class="dropdown-item" type="button">Something else here</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dropdown with divider</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Disabled Menu</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item disabled" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With active state</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item active" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Basic Dropdowns end -->



<!-- Dropdown with Headers start -->
<section id="dropdown-with-headers">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Dropdown with Headers</h4>
			<p>Add a header to label sections of actions in any dropdown menu.</p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Basic Header</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<h6 class="dropdown-header">1st Dropdown header</h6>
								<button class="dropdown-item" type="button">Action</button>
								<button class="dropdown-item" type="button">Another action</button>
								<h6 class="dropdown-header">2nd Dropdown header</h6>
								<button class="dropdown-item" type="button">Something else here</button>
								<button class="dropdown-item" type="button">Another Link</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Header with divider</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<h6 class="dropdown-header">1st Dropdown header</h6>
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<h6 class="dropdown-header">2nd Dropdown header</h6>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Highlighted Menu</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<h6 class="dropdown-header highlight">1st Dropdown header</h6>
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<h6 class="dropdown-header highlight">2nd Dropdown header</h6>
								<a class="dropdown-item" href="#">Something else here</a>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Header Icons</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<h6 class="dropdown-header"><i class="la la-lightbulb-o mr-1 font-medium-1"></i> <i class="la la-list float-right font-medium-1"></i> 1st Dropdown header</h6>
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<h6 class="dropdown-header highlight"><i class="la la-link mr-1 font-medium-1"></i> <i class="la la-eye float-right font-medium-1"></i> 2nd Dropdown header</h6>
								<a class="dropdown-item" href="#">Something else here</a>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown with Headers end -->



<!-- Dropdown Buttons with Arrow start -->
<section id="dropdown-buttons-with-arrow">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Dropdown Options</h4>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dropdown Buttons with Arrow</h4>
				</div>
				<div class="card-body">
					<div class="card-content">
						<p>Use <code>.arrow</code> class to <code>.dropdown-menu</code> to add arrow. <code>.arrow-right</code> &amp; <code>.arrow-left</code> classes to <code>.dropdown-menu</code> in submenu will give you arrow on right &amp; left accrodingly.</p>
						<div class="row">
							<div class="col-sm-3 col-6">
								<div class="btn-group mr-1 mb-1">
									<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									Action
									</button>
									<div class="dropdown-menu arrow">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu arrow-left" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-3 col-6">
								<div class="btn-group mr-1 mb-1">
									<button type="button" class="btn btn-danger btn-block dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									Action
									</button>
									<div class="dropdown-menu open-left arrow">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu open-left arrow-right" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-3 col-6">
								<div class="btn-group dropup mr-1 mb-1">
									<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									Action
									</button>
									<div class="dropdown-menu arrow">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu arrow-left" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-sm-3 col-6">
								<div class="btn-group dropup mr-1 mb-1">
									<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									Action
									</button>
									<div class="dropdown-menu open-left arrow">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu open-left arrow-right" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown Buttons with Arrow end -->



<!-- Dropdown Active states start -->
<section id="dropdown-active-states">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dropdown Active states</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Dropdown Buttons with <code>.active</code> class and theme color buttons.</p>
						<div class="row">
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
									Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu open-left" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown Active states end -->



<!-- Dropdown Sizes start -->
<section id="dropdown-sizes">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Dropdowns Sizes</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Extra Large Size</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use <code>.dropdown-menu-xl</code> class to set extra large size dropdown.</p>
						<div class="dropdown show">
							<div class="dropdown-menu dropdown-menu-xl show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<h6 class="dropdown-header">1st Dropdown header</h6>
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<h6 class="dropdown-header">2nd Dropdown header</h6>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Large Size</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use <code>.dropdown-menu-lg</code> class to set large size dropdown.</p>
						<div class="dropdown show">
							<div class="dropdown-menu dropdown-menu-lg show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<h6 class="dropdown-header">1st Dropdown header</h6>
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<h6 class="dropdown-header">2nd Dropdown header</h6>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Small Size</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use <code>.dropdown-menu-sm</code> class to set small size dropdown.</p>
						<div class="dropdown show">
							<div class="dropdown-menu dropdown-menu-sm show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<h6 class="dropdown-header">1st Dropdown header</h6>
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<h6 class="dropdown-header">2nd Dropdown header</h6>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown Sizes end -->

<!-- Dropdown with components start -->
<section id="dropdown-with-components">
	<div class="row">
		<div class="col-12 mt-1">
			<h4>Dropdowns with components</h4>
			<hr>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Left Icons</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<button class="dropdown-item" type="button"><i class="mr-1 ft-eye"></i> Action</button>
								<button class="dropdown-item" type="button"><i class="mr-1 ft-edit"></i> Another action</button>
								<button class="dropdown-item" type="button"><i class="mr-1 ft-link"></i> Something else here</button>
								<div class="dropdown-divider"></div>
								<button class="dropdown-item" type="button"><i class="mr-1 ft-trending-up"></i> Something here</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Right Icons</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<button class="dropdown-item" type="button"><i class="ft-crop float-right"></i> Action</button>
								<button class="dropdown-item" type="button"><i class="ft-link float-right"></i> Another action</button>
								<button class="dropdown-item" type="button"><i class="ft-trending-up float-right"></i> Something else here</button>
								<div class="dropdown-divider"></div>
								<button class="dropdown-item" type="button"><i class="ft-link float-right"></i> Something here</button>								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Icons on both sides</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<button class="dropdown-item" type="button"><i class="mr-1 ft-clock"></i> Action <i class="ft-edit float-right"></i></button>
								<button class="dropdown-item" type="button"><i class="mr-1 ft-share-2"></i> Another action <i class="ft-trash float-right"></i></button>
								<button class="dropdown-item" type="button"><i class="mr-1 ft-link"></i> Something else here <i class="ft-link float-right"></i></button>
								<div class="dropdown-divider"></div>
								<button class="dropdown-item" type="button"><i class="mr-1 ft-ft-bluetooth"></i> Something here<i class="ft-crop float-right"></i></button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Checkbox</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<div class="dropdown-item">
									<span class="skin skin-polaris">
										<span class="float-right">
											<input type="checkbox" id="check1">
										</span>
										<label for="check1">Dropdown First Option</label>
									</span>
								</div>
								<div class="dropdown-item">
									<span class="skin skin-polaris">
										<span class="float-right">
											<input type="checkbox" id="check2">
										</span>
										<label for="check2">Dropdown Second Option</label>
									</span>
								</div>
								<div class="dropdown-divider"></div>
								<div class="dropdown-item">
									<span class="skin skin-polaris">
										<input type="checkbox" id="check3" checked>
										<label for="check3" class="ml-1">Dropdown Third Option</label>
									</span>
								</div>
								<div class="dropdown-item">
									<span class="skin skin-polaris">
										<input type="checkbox" id="check4">
										<label for="check4" class="ml-1">Dropdown Fourth Option</label>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Radios</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<div class="dropdown-item">
									<span class="skin skin-futurico">
										<input type="radio" name="radio" id="radio1">
										<label for="radio1" class="ml-1"> First Radio Option</label>
									</span>
								</div>
								<div class="dropdown-item">
									<span class="skin skin-futurico">
										<input type="radio" name="radio" class="mr-1" id="radio2" checked>
										<label for="radio2" class="ml-1"> Second Radio Option</label>
									</span>
								</div>
								<div class="dropdown-divider"></div>
								<div class="dropdown-item">
									<span class="skin skin-futurico">
										<span class="float-right">
											<input type="radio" name="radio" id="radio3">
										</span>
										<label for="radio3">Third Radio Option</label>
									</span>
								</div>
								<div class="dropdown-item">
									<span class="skin skin-futurico">
										<span class="float-right">
											<input type="radio" name="radio" id="radio4">
										</span>
										<label for="radio4">Fourth Radio Option</label>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Switchery</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<div class="dropdown-item">
									<span class="float-right">
										<input type="checkbox" name="switchery" id="switchery1" class="switchery-xs" checked/>
									</span>
									<label for="switchery1" class="card-title">Switchery Options</label>
								</div>
								<div class="dropdown-item">
									<span class="float-right">
										<input type="checkbox" name="switchery" id="switchery2" class="switchery-xs"/>
									</span>
									<label for="switchery2" class="card-title">Switchery Options</label>
								</div>
								<div class="dropdown-divider"></div>
								<div class="dropdown-item">
									<input type="checkbox" name="switchery" id="switchery3" class="switchery-xs" checked disabled/>
									<label for="switchery3" class="card-title ml-1">Switchery Options</label>
								</div>
								<div class="dropdown-item">
									<input type="checkbox" name="switchery" id="switchery4" class="switchery-xs"/>
									<label for="switchery4" class="card-title ml-1">Switchery Options</label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Labels</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<button class="dropdown-item" type="button">
									<span class="mr-1 badge badge-default badge-success">New</span> Action
								</button>
								<button class="dropdown-item" type="button">
									<span class="mr-1 badge badge-default badge-danger">bug</span> Another action
								</button>
								<button class="dropdown-item" type="button">
									<span class="mr-1 badge badge-default badge-info">check</span> Something else here
								</button>
								<div class="dropdown-divider"></div>
								<div class="dropdown-submenu">
									<button class="dropdown-item" type="button"><span class="mr-1 badge badge-default badge-warning">beware</span> More Options
									</button>
									<div class="dropdown-menu" role="menu">
										<button class="dropdown-item" type="button">Submenu Item</button>
										<button class="dropdown-item" type="button">Submenu Item</button>
										<button class="dropdown-item" type="button">Submenu Item</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">With Badge Pills</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<button class="dropdown-item" type="button">
									<span class="mr-1 badge badge-pill badge-default badge-danger badge-glow">50</span> Action
								</button>
								<button class="dropdown-item" type="button">
									<span class="mr-1 badge badge-pill badge-default badge-info badge-glow">15</span> Another action
								</button>
								<button class="dropdown-item" type="button">
									<span class="mr-1 badge badge-pill badge-default badge-warning badge-glow">45</span> Something else here
								</button>
								<div class="dropdown-divider"></div>
								<div class="dropdown-submenu">
									<button class="dropdown-item" type="button">
										<span class="mr-1 badge badge-pill badge-default badge-success badge-glow">10</span> More Options
									</button>
									<div class="dropdown-menu" role="menu">
										<button class="dropdown-item" type="button">Submenu Item</button>
										<button class="dropdown-item" type="button">Submenu Item</button>
										<button class="dropdown-item" type="button">Submenu Item</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Labels &amp; Label pills</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<button class="dropdown-item" type="button">
									<span class="badge badge-default badge-success mr-1">New</span> 
									Action 
									<span class="badge badge-pill badge-default badge-danger badge-glow float-right">50</span>
								</button>
								<button class="dropdown-item" type="button">
									<span class="badge badge-pill badge-default badge-info badge-glow mr-1">15</span> 
									Another action 
									<span class="badge badge-default badge-success float-right">bug</span>
								</button>
								<button class="dropdown-item" type="button">
									<span class="badge badge-default badge-warning mr-1">check</span> 
									Something else here 
									<span class="badge badge-pill badge-default badge-info badge-glow ml-1">45</span>
								</button>
								<div class="dropdown-divider"></div>
								<div class="dropdown-submenu">
									<button class="dropdown-item" type="button">
										<span class="badge badge-pill badge-default badge-danger badge-glow mr-1">10</span> 
										More Options 
										<span class="badge badge-default badge-warning ml-1">beware</span>
									</button>
									<div class="dropdown-menu open-left" role="menu">
										<button class="dropdown-item" type="button">Submenu Item</button>
										<button class="dropdown-item" type="button">Submenu Item</button>
										<button class="dropdown-item" type="button">Submenu Item</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown with components end -->